<html>
<head>
		<meta name="viewport" content="width=device-width, user-scalable=no">
<title>iPod/iPhone trackpad</title>
<script src="prototype.js"></script>
<script>
function sendData (pars) {
	var url = '';
	var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars, onLoading: showLoad, onComplete: showResponse} );
}

function showLoad(){}

function showResponse(originalRequest) {
	var newData = originalRequest.responseText;
	if (newData != "OK!"){
		document.getElementById("debug").innerHTML = newData;
	}else{
		//refreshPosition();
	}
}

//this function clears the drag timeout and is called whenever the user starts or moves a touch and drag==true
function clearDragTimeout()
{
	if (dragTimeout != ""){
		clearTimeout(dragTimeout);
		dragTimeout="";
	}
}

//this function resets the timeout for dragging
//this will be called whenever a touch ends while drag is true
//we leave drag=true, because while the timer is running, the user may touch and move again, which will clear the dragTimeout until the touch ends 
function resetDragTimeout()
{
	clearDragTimeout();
	dragTimeout=setTimeout('dragEnded()',550);
}

function dragEnded()
{
	sendData("command=mouseup");
		drag=false;
}


var drag=false;
var clickTimer="";
var lastAction="";

var dragTimeout="";	//this timer is used to end a drag session

function touchStart(evt){
	
		//evt.preventDefault();
	if (evt.touches.length ==1 )
	{
		lastx=evt.touches[0].clientX;
		lasty=evt.touches[0].clientY;
		
		if (clickTimer != "")
		{
			clearTimeout(clickTimer);
			clickTimer="";
			drag=true;
			sendData("command=mousedown");
		}
		dx=0;
		dy=0;
		lastAction="down";
		
		if (drag==true)
			clearDragTimeout();
	}
}

function startTimer()
{
timer=setInterval("refreshPosition()",100);
}

function click()
{
	clickTimer="";
	sendData("command=click");
}

function touchEnd(evt){
	if (lastAction=="down" && drag==false)
	{
		clickTimer=setTimeout('click()',150);
	}
	
	if (drag==true)
	{
		resetDragTimeout();
	}
	
	lastAction="up";
}

var lastx=0;
var lasty=0;

var dx=0;
var dy=0;


function touchMove(e){
	if(e.touches.length == 1)
	{
		var touch = e.touches[0];
			
		var x=touch.clientX;
		var y=touch.clientY;
		
		e.preventDefault();
		
		dx += (x-lastx);
		dy += (y-lasty);
		lastx=x;
		lasty=y;
		
		lastAction="move";
		
		if (drag==true)
			clearDragTimeout();
	}
	
}

function refreshPosition(){
if (dx == 0 && dy ==0) return;
if (Math.abs(dx) > 5) dx=Math.pow(Math.abs(dx),1.4) * (dx<0 ? -1 : 1);
if (Math.abs(dy) > 5) dy=Math.pow(Math.abs(dy),1.4) * (dy<0 ? -1 : 1);


dx=Math.floor(dx);
dy=Math.floor(dy);

//document.getElementById['debug'].innerHTML = dx + "," + dy;

	sendData("command=move&x=" + dx + "&y=" + dy);
	dx=0;
	dy=0;

//setTimeout('refreshPosition()',50);

}


function sendKeyPress(theKeyCode){
	sendData("command=keystroke&character=" + theKeyCode);
}

var timer="";

function init(){
	document.body.ontouchstart = touchStart;
	document.body.ontouchmove = touchMove;
	document.body.ontouchend = touchEnd;
	setTimeout('window.scrollTo(0,1)',100);
	setInterval('window.scrollTo(0,1)',5000);	//causes the ipod browser to hide the address bar
	startTimer();
}
</script>

<style>
body{
	margin:0;
	padding:0;
}
#debug{
	width:100%;
}
#textpad{
	width:100%;
	font-family:sans-serif;
	text-align:center;
}
#textpad input{
	width:100%;
	height:30px;
}
#touch {
	font-family:sans-serif;
	font-size:xx-large;
	color: #CCCCCC;
}
</style>

</head>
<body onload="init();">
<div id="textpad">To type, click the textbox below:<br />
<input type="text" onKeyUp="sendKeyPress(event.keyCode);this.value=' ';" value=" " onClick="setTimeout('window.scrollTo(0,1);',200);"/></div>
<div id="debug"></div>
<table width="100%" height="100%">
<tr valign="middle"><td align="center"><span id="touch">Touch<br />Here</span></td></tr></table>
<br><br><br><br><br><br><br><br>
</body>
</html>
